<!--suppress ALL -->
<template>
  <el-row class="page-product">
    <el-col :span="19">
      <crumbs :keyword="keyword"/>
      <category
        :types="types"
        :areas="areas"/>
      <List :list="list"/>
    </el-col>
    <el-col :span="5">
      <Map :point="point"/>
    </el-col>
  </el-row>
</template>

<script>
/* eslint-disable prettier/prettier */

import Crumbs from '@/components/product/crumbs'
import Category from '@/components/product/category'
import List from '@/components/product/list'
import Map from '@/components/common/Map/index'

export default {
  name: 'Product',
  components: {
    Crumbs,
    Category,
    Map,
    List
  },
  data() {
    return {
      list: [],
      types: [],
      areas: [],
      keyword: '',
      point: []
    }
  },
  async asyncData(ctx) {
    const keyword = ctx.query.keyword,
      city = ctx.store.state.geo.position.city
    const res = await Promise.all([
      ctx.app.$axios.get('/search/resultByKeyword', {
        params: {
          keyword,
          city
        }
      }),
      ctx.app.$axios.get('/category/crumbs', { params: { city } })
    ])
    const [{ data: { pois } }, { data: { areas = [], types = [] } }] = res
    return { keyword, point: pois[0] && pois[0].location, areas, types, list: pois }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/products/index.scss';
</style>
